<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <!-- Content here -->
       
            <div class="row align-items-center" style="height: 40px;background-color: black;">
                <div class="col" style="padding-left: 25px;color: white;">
                    个人简历
                </div>
                <div class="col">
                    
                </div>
                <div class="col" style="padding-right: 25px;">
                    <button style="display: block;float: right;border: 1px solid white;color: white;margin-left: 10px;background-color: black;">下载</button>
                    <button style="display: block;float: right;border: 1px solid white;color: white;background-color: black;">打印</button>
                </div>
            </div>
                <div class="row" style="margin-top: 10px;">
                    <div class="col-md-auto">
                    </div>
                    <div class="col col-lg-3" style="padding: 0px 25px 0px 25px;min-width: 200px;">
                        <div class="col">
                        <div class="row" style="border: 1px solid gray;">
                            <div style="background-color: #4b70e2;padding-left: 10px;height: 30px;color: white;font-size: 13px;line-height: 30px;">个人信息</div>
                             <!-- <div style="padding: 10px 10px 0 10px;"> -->
                                <img src="images/mo.png" style="height: auto;display: block;margin-top: 10px;">
                             <!-- </div> -->
                             <center>jzf</center>
                            <div class="col" style="padding: 0px 21px 0 21px;">
                                <div class="row" style="padding-left: 0px;font-size: 13px;font-weight: bold;">
                                    前端工程师
                                </div>
                                <div style="margin-left: -12px;">
                                    <img src="images/学校.png" alt="fz" style="width: 15px;display: inline-block;"><span style="font-size: 13px;margin-left: 5px;">湖南农业大学</span>
                                </div>
                                <div style="margin-left: -12px;">
                                    <img src="images/学生证认证.png" alt="fz" style="width: 17px;display: inline-block;"><span
                                        style="font-size: 13px;margin-left: 5px;">全日制本科</span>
                                </div>
                                <div style="margin-left: -12px;">
                                    <img src="images/湖南.png" alt="fz" style="width: 17px;display: inline-block;"><span
                                        style="font-size: 13px;margin-left: 5px;">湖南长沙</span>
                                </div>
                                <div style="margin-left: -12px;">
                                    <img src="images/CET监考报名.png" alt="fz" style="width: 17px;display: inline-block;"><span
                                        style="font-size: 13px;margin-left: 5px;">CET-4</span>
                                </div>
                                <div style="margin-left: -12px;">
                                    <img src="images/入党积极分子.png" alt="fz" style="width: 17px;display: inline-block;"><span
                                        style="font-size: 13px;margin-left: 5px;">预备党员</span>
                                </div>
                                <div style="margin-left: -12px;">
                                    <img src="images/电话.png" alt="fz" style="width: 17px;display: inline-block;"><span
                                        style="font-size: 13px;margin-left: 5px;">(123)456-7890</span>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 10px;border: 1px solid gray;">
                            <div class="col">
                                <div class="row" style="font-size: 13px;padding-left: 10px;height: 30px;line-height: 30px;background-color: whitesmoke;margin-bottom: 10px;">技能描述</div>
                                <div class="row">
                                    <div style="padding: 10px 30px 0 20px;">
                                        <div
                                            style="font-size: 12px;float: left;margin-right: 10px;height: 14px;line-height: 14px;width: 40px;text-align: right;">
                                            HTML</div>
                                        <div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0"
                                            aria-valuemax="100">
                                            <div class="progress-bar progress-bar-striped" style="width: 80%"></div>
                                        </div>
                                    </div>
                                    <div style="padding: 10px 30px 0 20px;">
                                        <div style="font-size: 12px;float: left;margin-right: 10px;height: 14px;line-height: 14px;width: 40px;text-align: right;">CSS</div>
                                        <div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0"
                                            aria-valuemax="100" style="height: 14px;">
                                            <div class="progress-bar progress-bar-striped bg-success" style="width: 70%"></div>
                                        </div>
                                    </div>
                                    <div style="padding: 10px 30px 0 20px;">
                                        <div
                                            style="font-size: 12px;float: left;margin-right: 10px;height: 14px;line-height: 14px;width: 40px;text-align: right;">
                                            JS</div>
                                        <div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0"
                                            aria-valuemax="100" style="height: 14px;">
                                            <div class="progress-bar progress-bar-striped bg-danger" style="width: 85%"></div>
                                        </div>
                                    </div>
                                    <div style="padding: 10px 30px 0 20px;margin-bottom: 20px;">
                                        <div
                                            style="font-size: 12px;float: left;margin-right: 10px;height: 14px;line-height: 14px;width: 40px;text-align: right;">
                                            JAVA</div>
                                        <div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0"
                                            aria-valuemax="100" style="height: 14px;">
                                            <div class="progress-bar progress-bar-striped bg-warning" style="width: 90%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="border: 1px solid gray;margin-top: 10px;">
                             <div style="background-color: green;padding-left: 10px;height: 30px;line-height: 30px;">联系我</div>
                            <form>
                                <div class="mb-3" style="margin-top: 15px;">
                                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" style="border: 1px solid gray;">
                                    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                                </div>
                                <div class="mb-3">
                                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" style="border: 1px solid gray;">
                                </div>
                                <button type="submit" class="btn btn-primary" style="float: right;margin-bottom: 10px;">Submit</button>
                            </form>
                        </div>
                        </div>
                    </div> 
                    <div class="col-md-auto">
                    </div>
                    <div class="col col-lg-8" style="min-width: 467px;">
                        <div class="col">
                           <div class="row" style="border: 1px solid gray;padding: 15px 15px 0 15px;">
                              <h6>四年成果说明 2019xxx比赛一等奖</h6>
                              <p>
                                制定并成功执行了超过10场的大型活动策划，其中包括“携程未来旅行空间站”和“携程X剑网3”，各活动均取得线上千万级曝光及线下上万人的活动参与。<br>
                                有效沟通与协调超过5个部门和20位供应商，确保项目的顺利进行。<br>
                                设计并执行了针对汉中机场的全新营销策略，包括打造IP和携程为汉中机场打造互联网智慧机场。<br>
                                成功拓展了携程日本线下主题店，与日本JR、阪急阪神集团签订了长期合作协议。 带领团队获得了年度最佳营销团队奖。(摘自网络)
                              </p>
                            </div>
                           <div class="row" style="margin-top: 20px;border: 1px solid gray;padding-top: 10px;padding-bottom: 10px;">
                            <div class="accordion accordion-flush" id="accordionFlushExample">
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="flush-headingOne">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                                            项目经验
                                        </button>
                                    </h2>
                                    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
                                        data-bs-parent="#accordionFlushExample">
                                        <div class="accordion-body">校园二手交易平台
                                        
                                            负责设计并实现一个在线教育平台，包括前端用户界面、后端服务器和数据库。使用React构建前端界面，实现了课程浏览、购买和学习等功能。使用Node.js作为后端服务器，处理用户请求和数据存储。使用MongoDB作为数据库，存储用户信息和课程数据。通过团队合作，成功上线并运行该平台，获得了良好的用户反馈。</div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="flush-headingTwo">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                                            获奖情况
                                        </button>
                                    </h2>
                                    <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
                                        data-bs-parent="#accordionFlushExample">
                                        <div class="accordion-body">全国大学生计算机设计大赛一等奖（20XX年）
                                        校级编程竞赛金奖（20XX年）</div>
                                    </div>
                                </div>
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="flush-headingThree">
                                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                                            证书
                                        </button>
                                    </h2>
                                    <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
                                        data-bs-parent="#accordionFlushExample">
                                        <div class="accordion-body">计算机技术与软件专业资格考试（水平）证书
                                        
                                            This certifies that [Recipient's Name], having satisfied the necessary criteria, has attained an achievement in the field of Project Management.
                                    </div>
                                </div>
                            </div>
                           </div>
                        </div>
                    </div>
                </div>
    </div>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>